<template>
  <div class="me">
  <!-- 头部 -->
    <div class="Head">
        <div class="Touxiang">
          <img src="img/touxiang.jpg" >

        </div>
        <h3 v-for="obj in userName">{{obj.uname}}</h3>
        <img class="vip" src="img/vip.png">
    </div>
    <!-- 中部 -->
    <div class="Mid">
      <ul>
        <li><a href="meOrder.html"><img src="img/meMid2.png"><span>我的订单</span><img class="img" src="img/jiantou.png"></a></li>
        <li><a href="meCollect.html"><img src="img/meMid3.png"><span>我的收藏</span><img class="img" src="img/jiantou.png"></a></li>
        <li><a href="mePay.html"><img src="img/meMid4.png"><span>我的钱包</span><img class="img" src="img/jiantou.png"></a></li>
        <li><a href="meTake.html"><img src="img/meMid5.png"><span>收货地址</span><img class="img" src="img/jiantou.png"></a></li>
        <li><a href="meVip.html"><img src="img/meMid6.png"><span>升级会员</span><img class="img" src="img/jiantou.png"></a></li>
        <li><a href="meData.html"><img src="img/meMid7.png"><span>我的设置</span><img class="img" src="img/jiantou.png"></a></li>
      </ul>
    </div>
    <!-- 底部 -->
    <div class="Bot">
    <ul>
        <li><a href="meMore.html"><img src="img/meMid1.png"><span>更多</span><img class="img" src="img/jiantou.png"></a></li>
        <li><a href="login.html"><img src="img/meMid8.png"><span>注销</span><img class="img" src="img/jiantou.png"></a></li>
    </ul>
     
    </div>
   <div class="kong"></div>
  </div>
</template>

<script>


export default {
  data(){
     return {
      userName:[{uname:localStorage.getItem("username") }]
    }
  }
}
</script>

<style scoped>
.me{
  width: 100%;
}
a{
    color: black;
  }
.Head{
  width: 100%;
  height: 2rem;
  background-image: url(img/head.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  text-align: center;
}
.Head .Touxiang{
  width: 18%;
  height: .7rem;
  border-radius:50%; 
  overflow:hidden;
  margin: auto;
  border: 2px  solid white;
  position: relative;
  top: 20%;
}
.Head .Touxiang img{
  width: 100%
}
.Head h3{
  color: white;
  position: relative;
  top: 22%;
}
.Head .vip{
  width: 25%;
  position: relative;
  top: 0.5rem;
}
/*中部*/
.Mid{
  width: 100%;
  height: 100%;
  margin: auto;
  border: 1px solid #dbdbdb;
  background-color: white;
  margin-top: 0.1rem;
}
.Mid ul{
   width: 90%;
  margin: auto;
}
.Mid ul li{
  padding: 3% 0;
  border-top: 1px solid #dbdbdb;
}
.Mid ul li:nth-child(1){
  border: none;
}
.Mid ul li img{
  width: 7%;
  margin:0 5%; 
}
.Mid ul li .img{
  width: 3%;
  position: absolute;
  right: 1%;
}
/*底部*/
.Bot{
  width: 100%;
  height: 100%;
  margin: auto;
  border: 1px solid #dbdbdb;
  background-color: white;
    margin-top: 0.12rem;
}
.Bot ul{
   width: 90%;
  margin: auto;
}
.Bot ul li{
  padding: 3% 0;
  border-top: 1px solid #dbdbdb;
}
.Bot ul li:nth-child(1){
  border: none;
}
.Bot ul li img{
  width: 7%;
  margin:0 5%; 
}
.Bot ul li .img{
  width: 3%;
  position: absolute;
  right: 1%;
}
.kong{
  height: 60px;
}
</style>
